<template>
  <div>

    <!--吸顶-->
    <van-sticky style="background-color: white">
      <!--头部-->
      <van-row class="headStyle">
        <van-col span="5"><img src="../assets/img.png" class="logo"/></van-col>
        <van-col span="15">
          <van-search v-model="queryVo.storeName" placeholder="请输入店铺名" class="search"/>
        </van-col>
        <van-col span="4">
          <div class="login" @click="search">搜索</div>
        </van-col>
      </van-row>
      <!--    tab跳-->
      <van-tabs v-model:active="type">
        <van-tab v-for="(item,index) in tabList" :key="index" :title="item" @click="setType(item)">
          <!--        内容-->
        </van-tab>
      </van-tabs>
    </van-sticky>

    <!--    轮播图-->
    <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in imgObj">
        <img :src=item style="width: 100%"/>
      </van-swipe-item>
    </van-swipe>

<!--    &lt;!&ndash;    两排宫格&ndash;&gt;-->
<!--    <van-grid :column-num="5">-->
<!--      <van-grid-item v-for="(item,index) in goods_icon" :key="index" :icon="item.imgurl" :text="item.goods_txt"/>-->
<!--    </van-grid>-->


    <!--    店铺列表-->
    <div class="goodsListDiv">
      <div v-for="(item,index) in storeList" class="store" @click="jump('/store/'+item.storeId+'/'+item.storeName)">
<!--        <van-row>-->
<!--          <van-col span="8"><img :src="item.cover" class="storeImg"></van-col>-->
<!--          <van-col span="16">-->
<!--            <div class="storeName">{{ item.storeName }}</div>-->
<!--            <div class="avgPrice">{{ item.storeAddress }}</div>-->
<!--          </van-col>-->
<!--        </van-row>-->

        <van-card
          num="2"
          :price=item.commonPrice/100
          :desc="item.storeAddress"
          :title=item.storeName
          :thumb=item.cover
        >
          <template #num>
            <div>{{item.storeTel}}</div>
          </template>
          <template #price>
            <div>人均：¥{{item.commonPrice/100}}</div>
          </template>
        </van-card>
      </div>
    </div>
    <div style="height: .9rem"></div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      tabList: ['推荐', '烧烤', '火锅', '小吃', '夜宵', '早餐', '网红食品', '奶茶'],
      imgObj: ['http://p0.meituan.net/codeman/a97baf515235f4c5a2b1323a741e577185048.jpg',
        'http://p1.meituan.net/codeman/826a5ed09dab49af658c34624d75491861404.jpg'],
      // goods_icon: [
      //   {
      //     imgurl: 'https://yanxuan.nosdn.127.net/7dd4adbc8cb5f41f44a136398f0653ec.png?quality=95&type=webp&imageView',
      //     goods_txt: '饼干糕点'
      //   },
      //   {
      //     imgurl: 'https://yanxuan.nosdn.127.net/073a4be8c4ba38e53ffc247ee526bc2c.png?quality=95&type=webp&imageView',
      //     goods_txt: '乳品饮料'
      //   }
      // ],

      active1: '',
      value: '',
      active: '',
      storeList: [
        {
          imgUrl: require('../../image/demo1.png'),
          store_name: '麻辣香锅'
        }
      ],
      queryVo:{
        storeName:'',
        type:0
      },
      type:0
    }
  },
  watch:{
    type:function (val){
      this.queryVo.type = val
      this.search()
    }
  },

  methods: {
    jump(path) {
      this.$router.push(path)
    },
    search(){
      let _this = this
      this.$axios.post("/store/search",this.queryVo).then((resp) => {
        console.log(resp.data.data.storeList)
        _this.storeList = resp.data.data.storeList
      })
    },
    setType(item){
      console.log(item)
    }
  },
  created() {
    this.search()
  },
}
</script>

<style scoped>
.logo {
  width: 1rem;
  display: block;
  margin-left: .2rem;
}

.van-search__content {
  border-radius: .3rem;
}

.login {
  width: .8rem;
  height: .4rem;
  color: brown;
  margin-top: .25rem;
  border: 1px solid darkred;
  border-radius: .2rem;
  font-size: .2rem;
  text-align: center;
  line-height: .4rem;
}

.service_info {
  font-size: .2rem;
  text-align: center;
  display: inline-block;
  height: .2rem;
}

.goodsListDiv {
  clear: both;
  background-color: gainsboro;
  margin-top: .1rem;
}

.store {
  clear: both;
  background-color: white;
  border-radius: .2rem;
  /*margin: .1rem;*/
  margin-top: .1rem;
}

.storeImg {
  width: 2rem;
  height: 2rem;
  margin-top: 0rem;
}

.storeName {
  font-size: .3rem;
  margin: .2rem;
}

.avgPrice {
  text-align: right;
  font-size: .3rem;
  margin-right: .2rem;
}

.headStyle {
  background-color: white;
}
</style>
